<template>
    <div class="test-component-page">
        <t class="t2">使用示例</t>
        <component v-for="(comp, key) in components" :key="key" :is="comp"></component>
        <template v-for="(data, key) in configTableDatas">
            <config-table v-if="data.length" :key="key" :title="titles[key]" :step="key" :table-data="data"></config-table>
            <div v-if="key === 'attributes'" :key="key">
                <t class="t2" id="表单项类型【fields】">表单项类型【fields】</t>
                <li>
                    <span class="s-code">fields</span>支持配置的表单项类型如下表，
                    点击对应<span class="s-code">type</span>可跳转至对应组件的<span class="d-code">配置项【props】</span>查看该组件支持的特定配置
                </li>
                <br />
                <sib-table
                    stripe
                    :index-config="fieldsIndexConfig"
                    :show-pagination="false"
                    :table-column="fieldsColumn"
                    :table-data="fieldsData">
                    <template #example="{ row }">
                        <template v-if="row.code !== 'slot' && row.exampleProps">
                            <sib-item v-model="row.exampleValue" :props="row.exampleProps"></sib-item>
                        </template>
                        <span v-else>-</span>
                    </template>
                </sib-table>
            </div>
        </template>

        <el-backtop target=".main-container"></el-backtop>
    </div>
</template>

<script>
import {
    onMounted, computed, watch, nextTick,
} from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import fieldTypesDesc from '../../utils/field-types-desc';

export default {
    setup() {
        const route = useRoute();
        const router = useRouter();
        const store = useStore();
        const components = computed(() => {
            const comps = {};
            Array(20).fill().forEach((_, i) => {
                const example = `example${i + 1}`;
                let comp;
                // eslint-disable-next-line
                try { comp = require(`./${example}`).default; } catch (error) {}
                if (comp) comps[example] = comp;
            });
            return comps;
        });
        const configTableDatas = computed(() => {
            let datas = {};
            // eslint-disable-next-line
            try { datas = require(`./attributes`).default; } catch (error) {}
            return datas;
        });
        const titles = computed(() => {
            const compName = (route.path || '').slice(1).split('-').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join('');
            return {
                attributes: `${compName} 属性`,
                events: `${compName} 事件`,
                slots: `${compName} 插槽`,
                refs: `${compName} 方法`,
            };
        });

        watch(route, () => {
            nextTick(() => { store.commit('updateArticleTree'); });
        });
        onMounted(() => { store.commit('updateArticleTree'); });

        return {
            components,
            configTableDatas,
            titles,
            fieldsIndexConfig: { type: 'hidden' },
            fieldsColumn: [
                {
                    label: 'type',
                    code: 'code',
                    type: 'button',
                    link: false,
                    size: 'small',
                    buttonType: 'warning',
                    plain: true,
                    filter: ({ code }) => code !== 'slot',
                    width: 150,
                    handler({ code }) {
                        router.push(`/${code}`).then(() => {
                            nextTick(() => {
                                setTimeout(() => {
                                    const attributesDom = document.getElementById('配置项【props】');
                                    if (attributesDom) attributesDom.scrollIntoView({ behavior: 'smooth', inline: 'nearest' });
                                }, 1000);
                            });
                        });
                    },
                },
                {
                    label: '控件名称',
                    code: 'name',
                    type: 'tag',
                    tagType: 'info',
                    // effect: 'dark',
                    width: 250,
                },
                {
                    label: '控件示例',
                    code: 'example',
                    type: 'slot',
                    minWidth: 300,
                    width: 300,
                },
                {
                    label: '控件说明',
                    code: 'des',
                },
            ],
            fieldsData: [
                {
                    name: '插槽',
                    code: 'slot',
                    des: '开启插槽功能，整列单元格将支持通过插槽自定义内容',
                },
                ...fieldTypesDesc,
            ],
        };
    },
};
</script>
